<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EndoSight-UC 登录页面优化演示</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
            background: linear-gradient(135deg, #6B46C1 0%, #9333EA 25%, #7C3AED 50%, #6D28D9 75%, #4C1D95 100%);
            margin: 0;
            padding: 40px;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .demo-container {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 24px;
            padding: 40px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 20px 60px rgba(31, 38, 135, 0.15);
            max-width: 800px;
            width: 100%;
        }
        .demo-title {
            font-size: 32px;
            font-weight: 700;
            color: #1D1D1F;
            margin-bottom: 20px;
            text-align: center;
        }
        .demo-subtitle {
            font-size: 18px;
            color: #86868B;
            text-align: center;
            margin-bottom: 40px;
        }
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 24px;
            margin-bottom: 40px;
        }
        .feature-card {
            background: rgba(248, 249, 250, 0.8);
            border-radius: 16px;
            padding: 24px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }
        .feature-icon {
            font-size: 32px;
            margin-bottom: 16px;
        }
        .feature-title {
            font-size: 18px;
            font-weight: 600;
            color: #1D1D1F;
            margin-bottom: 8px;
        }
        .feature-desc {
            font-size: 14px;
            color: #86868B;
            line-height: 1.5;
        }
        .demo-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #007AFF;
            color: white;
            text-decoration: none;
            padding: 12px 24px;
            border-radius: 12px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        .demo-link:hover {
            background: #0056CC;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
        }
        .live-demo {
            text-align: center;
            margin-top: 40px;
            padding-top: 40px;
            border-top: 1px solid rgba(0, 0, 0, 0.08);
        }
        .status-indicator {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 4px 12px;
            background: rgba(52, 199, 89, 0.1);
            color: #34C759;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            margin-bottom: 16px;
        }
        .status-dot {
            width: 8px;
            height: 8px;
            background: #34C759;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .tech-stack {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 24px;
        }
        .tech-tag {
            background: rgba(0, 122, 255, 0.1);
            color: #007AFF;
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 12px;
            font-weight: 500;
        }
    </style>
</head>
<body>
    <div class="demo-container">
        <div class="demo-title">🎯 EndoSight-UC 登录页面优化完成</div>
        <div class="demo-subtitle">Apple级微交互体验 · 医疗级设计标准 · 现代化架构</div>

        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">🎨</div>
                <div class="feature-title">Aperture 设计系统</div>
                <div class="feature-desc">医疗级柔和渐变背景、浮动阴影效果、Apple风格颜色调板</div>
            </div>

            <div class="feature-card">
                <div class="feature-icon">✨</div>
                <div class="feature-title">微交互动效</div>
                <div class="feature-desc">输入框聚焦动画、按钮涟漪效果、错误震动反馈、加载状态动画</div>
            </div>

            <div class="feature-card">
                <div class="feature-icon">🔧</div>
                <div class="feature-title">组件化架构</div>
                <div class="feature-desc">TypeScript接口设计、TestAccountInfo独立组件、响应式状态管理</div>
            </div>

            <div class="feature-card">
                <div class="feature-icon">🛡️</div>
                <div class="feature-title">用户体验优化</div>
                <div class="feature-desc">密码显示/隐藏、一键复制填充、深色模式适配、无障碍支持</div>
            </div>

            <div class="feature-card">
                <div class="feature-icon">📱</div>
                <div class="feature-title">响应式设计</div>
                <div class="feature-desc">移动端优化、触控友好、自适应布局、性能优化</div>
            </div>

            <div class="feature-card">
                <div class="feature-icon">🌍</div>
                <div class="feature-title">国际化准备</div>
                <div class="feature-desc">i18n键值管理、多语言包结构、Composable状态管理</div>
            </div>
        </div>

        <div class="live-demo">
            <div class="status-indicator">
                <div class="status-dot"></div>
                前端服务器运行中 (端口: 8101)
            </div>

            <a href="http://localhost:8101" target="_blank" class="demo-link">
                🚀 查看优化后的登录页面
            </a>

            <div class="tech-stack">
                <div class="tech-tag">Vue 3</div>
                <div class="tech-tag">TypeScript</div>
                <div class="tech-tag">Element Plus</div>
                <div class="tech-tag">Vite</div>
                <div class="tech-tag">Aperture Design</div>
                <div class="tech-tag">Apple HIG</div>
            </div>
        </div>
    </div>
</body>
</html>